<template>
  <div
      class="flex w-full mb-6 overflow-hidden"
      :class="[{'flex-row-reverse': inversion}]"
  >
    <div
        class="overflow-hidden text-sm"
        :class="[inversion ? 'items-end' : 'items-start']"
    >
      <p
          class="text-sx text-[#b4bbc4]"
          :class="[inversion ? 'text-right' : 'text-left']"
      >
        {{ dateTime}}
      </p>
      <div
        class="flex items-end gap-1 mt-2"
        :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
      >
        <TextComponents
          ref="textRef"
          :inversion="inversion"
          :error="error"
          :text="text"
          :reasoning="reasoning"
          :loading="loading"
          :as-raw-text="asRawText"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import TextComponents from "./Text.vue"

const props = defineProps<{
  dateTime?: string,
  text?: string,
  reasoning?: string,
  inversion?: boolean,
  error?: boolean,
  loading?: boolean
}>()

const asRawText = ref(props.inversion)

</script>

<style scoped>

</style>